<template>

    <s-layout id="layout" :tabbarshow="false" navbar="normal" :title="'考勤数据'" :autoBack="true" leftIconColor="#ffffff"
        :bgColor="red" :titleStyle="{ color: '#fff', fontSize: '32rpx' }">

        <view id="app"
            :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/beijing1200webp.png)`, paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
            <view class="area">
                <!-- 项目栏 -->
                <view class="project"
                    :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/weitu01.png)`, }">
                    <view class="chop" @tap="SelectItem">
                        <view class="spill">{{ PopupText ? PopupText : '暂无部门' }}
                            <image :src="`${baseUrl}/uploads/uniapp_image/staff/xuanze.png`" mode="scaleToFill" />
                        </view>
                    </view>
                    <view class="text">
                        <view class="date">
                            <view class="date_splice" @tap="DateShow" >{{ FormData.date ? FormData.date : '选择日期' }}</view>  
                            <image :src="`${baseUrl}/uploads/uniapp_image/staff/jiao_01.png`" mode="scaleToFill" />
                        </view>
                        <view class="all" @tap="all">
                            {{ StateShow ? StateShow : '全部班次' }}
                            <image :src="`${baseUrl}/uploads/uniapp_image/staff/jiao_02.png`" mode="scaleToFill" />
                        </view>
                    </view>
                </view>
                <!-- 搜索框 -->
                <view class="SearchBox">
                    <s-search-keyword :placeholder="'搜索员工'" @searchKeyWord="searchKeyWord"></s-search-keyword>
                </view>

            </view>

            <!-- 列表综合 -->
            <scroll-view scroll-y class="comprehensive" @scrolltolower="listScrolltolower" v-if="scheduleList.length">
                <view>
                    <!-- 标题 -->
                    <view class="headline">
                        <view class="statistics">
                            <text style="margin-left: 20rpx">共 {{scheduleList.length}} 人</text>
                        </view>
                        <view class="refresh" @tap="refresh">点击刷新
                            <image :src="`${baseUrl}/uploads/uniapp_image/staff/shuaxin.png`" mode="scaleToFill" />
                        </view>
                    </view>

                    <!-- 列表 -->
                    <view class="Attendance_List">
                        <view class="List_item" v-for="(item, index) in scheduleList" :key="index">
                            <view class="head">
                                <image :src="`${baseUrl}` + item.avatar" mode="scaleToFill" />
                            </view>
                            <view class="center">
                                <view class="top">
                                    <view class="nickname">{{ item.nickname }}</view>
                                    <view class="age">{{ item.gender == 0 ?'女':'男'}} {{item.age}}</view>
                                    <view class="phone" @tap="dialPhone(item)" >
                                        <image :src="`${baseUrl}/uploads/uniapp_image/staff/class_icon03.png`"
                                            mode="scaleToFill" />
                                    </view>
                                </view>
                                <view class="bottom"  > 
                                    <view v-for="(i, index) in item.list" :key="index">
                                        {{ i.type == 1 ? '上午' : '下午' }}:
                                        {{ i.clocking_time }}
                                    </view>
                                </view>
                            </view>

                        </view>
                    </view>
                </view>
                <!-- 加载中 && 没有更多数据了 -->
                <view>
                    <s-loadmore-gather :current_page="listPage" :last_page="listlast_page"
                        ref="loadmoreRef"></s-loadmore-gather>
                </view>
            </scroll-view>
            <u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容"></u-empty>
        </view>

    </s-layout>

    <!-- 底部弹出组件 && 部门弹出 -->
    <s-project-class @selectedData="switchTitle"  :maxDate="maxDate" :arrayList="projectDataList" ref="popupListRef"
        :searchBoxIsShow="false" :showGoLink="'#'"></s-project-class>
    <!-- 日期 单个 -->
  <up-calendar :closeOnClickOverlay="true"   :monthNum="monthNum" :minDate="minDate" :show="show_single" :mode="mode_single" @confirm="confirm_single" @close="close_single"></up-calendar>
    <uni-popup ref="statePopup" type="bottom" background-color="#fff" @change="change">
        <view class="popup-content">
            <view class="title">请选择状态</view>
            <view class="state" v-for="v in state_arr" :key="v" @tap="selectState(v.value, v.title)">
                {{ v.title }}
            </view>
        </view>
    </uni-popup>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { baseUrl } from "@/sheep/config";
import sheep from '@/sheep';
import tools from '@/sheep/helper/tools.js';
import { calculateAge } from '@/utils/fn.js';
const { safeAreaInsets } = uni.getSystemInfoSync();
const d = new Date();
const year = d.getFullYear();
let month = d.getMonth() + 1;
month = month < 10 ? `0${month}` : month;
const date = d.getDate();
const  monthNum =  ref(13)
if (date <= 9) {
date = '0' + date;
}
const minDate =   year + '-' + '01' + '-' + '01';
onLoad((options) => {
    PopupId.value = options.id;
    if (options.project_name == String(undefined)) {
        PopupText.value = '';
    } else {
        PopupText.value = options.project_name;
    }
    let params={
      is_all:'0',
      is_include_main:'0'
    }
    FormData.value.date = new Date().toISOString().slice(0, 10)
    projectList(params);
    setTimeout(()=>{
        getScheduleList();
    },500)
    
});
// 全部班次逻辑
const statePopup = ref();
const all = () => {
    statePopup.value.open();
};

// 点击选择时间范围
const  FormData = ref({
    date: '',
})
  const mode_single = ref('single')
  const show_single = ref(false)
const DateShow = () => {
    show_single.value = true
  }
  const confirm_single = (e) => {
    FormData.value.date = `${e[0]}`
    console.log('日期',FormData.value.date);
    scheduleList.value = []
    listpagenumber.value = 1
    getScheduleList()
    close_single()
  }
  const close_single = () =>   {
    show_single.value = false
  }
// 状态转译
const state_arr = ref([
    {
        value: 0,
        title: '待开始',
        color: '#0038F7',
    },
    {
        value: 1,
        title: '进行中',
        color: '#35d420',
    },
    {
        value: 2,
        title: '已结束',
        color: '#F70000',
    },
    {
        value: 3,
        title: '已终止',
        color: '#F77500',
    },
    {
        value: 4,
        title: '已作废',
        color: '#000000',
    },
]);

// 选择状态
const StateShow = ref();

const selectState = (value, title) => {
    StateShow.value = title;
    
    scheduleList.value = [];
    listpagenumber.value = 1
    getScheduleList();
    statePopup.value.close();
};

// 获取数据

const listPage = ref()
const listlast_page = ref();
const listpagenumber = ref(1);
const scheduleList = ref([]);
const getScheduleList = async () => {
    let params = {
        filter: JSON.stringify({
            schedule_id: PopupId.value,
            date: FormData.value.date,
            'user.nickname': keyword.value
        }),
        op: JSON.stringify({
            schedule_id: '=',
            date: '=',
            'user.nickname': 'LIKE'
        }),
        page: listpagenumber.value
    };
    const res = await sheep.$api.project.postScheduleIndex(params);

    scheduleList.value = [...scheduleList.value, ...res.data.rows];
    listPage.value = res.data.current_page
    listlast_page.value = res.data.last_page
    scheduleList.value.forEach(items => {
        if (items.birthday == null) {
          items.age = '无'
        } else {
          items.age = calculateAge(items.birthday)+'岁';
        }
       
      })
};
// 滚动触底
const loadmoreRef = ref()
//滚动触底
const listScrolltolower = () => {
    loadmoreRef.value.PopupScrolltolower()
    if (listPage.value < listlast_page.value) {
        listpagenumber.value += 1;
    } else {
        return;
    }
    getScheduleList();
};
//搜索
const keyword = ref()
const searchKeyWord = (srarch_value) => {
    scheduleList.value = []
    listpagenumber.value = 1
    keyword.value = srarch_value
    getScheduleList()
}
// 切换项目
const PopupText = ref();
const PopupId = ref();
//项目选择 // 切换项目------------------------
const SelectItem = () => {
    popupListRef.value.open()
};

const popupListRef = ref()
// 调用接口：获取项目列表
const projectDataList = ref([])
const projectList = async (params = null) => {
    const res = await sheep.$api.app.getDepartment(params);
    projectDataList.value = res.data;
    PopupText.value = res.data[0]?.name+'/'+res.data[0]?.childrens[0]?.name;
    PopupId.value = res.data[0].childrens[0]?.id
  
    
};


// 项目id
// 子组件触发的方法将项目title改变
const switchTitle = (data) => {
    PopupText.value = data.jointTitles
    PopupId.value = data.id
    scheduleList.value = []
    listpagenumber.value = 1
    getScheduleList();

}
// 拨打电话
const dialPhone = (item) => {
  tools.callPhone(item.mobile)
}
//refresh
const refresh = ()=>{
    uni.$u.throttle(() => {
        sheep.$helper.toast('刷新成功')
        setTimeout(()=>{
            scheduleList.value = []
            listpagenumber.value = 1
            getScheduleList()
        })
    },1000)
}
</script>

<style scoped lang="scss">
page {
    width: 100%;
    height: 100%;
}

#app {
    background-size: 100%;
    width: 100%;
    min-height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

:deep(.uni-date__x-input) {
    width: 70% !important;
    padding: 0 !important;
    color: $uni-color-primary;
}

:deep(.uni-date-x--border) {
    border: none;
    width: 100%;
    padding: 0;
    color: $uni-color-primary;
}

:deep(.uni-date-x) {
    background-color: rgba(0, 0, 0, 0);
    padding: 0;
    color: $uni-color-primary !important;
}

:deep(.uni-date-editor) {
    width: 100%;
    color: $uni-color-primary;
}

.uni-date {
    width: 100%;
    color: $uni-color-primary;
}

.area {
    width: calc(100% - 40rpx);
    margin: 0 20rpx;

    // 主标题
    .host_title {
        color: $uni-bg-color;
        font-size: 34rpx;
        position: relative;
        margin-top: 10rpx;

        .button {
            width: 64rpx;
            height: 64rpx;
            background-color: $uni-bg-color;
            position: absolute;
            border-radius: 50%;

            image {
                width: 40rpx;
                height: 30rpx;
                padding-left: 13rpx;
                padding-top: 18rpx;
            }
        }

        .title {
            text-align: center;
            line-height: 64rpx;
        }
    }

    // 项目
    .project {
        margin-top: 40rpx;
        background-size: 100%;
        width: 100%;
        height: 182rpx;
        background-repeat: no-repeat;
        color: $uni-text-color;
        margin-bottom: 20rpx;

        .chop {
            width: calc(100% - 40rpx);
            height: 56rpx;
            font-size: 40rpx;
            font-weight: 700;
            padding: 40rpx 0 0 40rpx;
            display: flex;
            align-items: center;
            /* 垂直居中 */

            // 项目标题超出隐藏
            .spill {
                width: 85%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            image {
                width: 26rpx;
                height: 26rpx;
                // margin-left: 10rpx;
                //   padding-top: 20rpx;
            }
        }

        .text {
            display: flex;
            width: 100%;
            align-items: center;
            height: 90rpx;
            .date {
                display: flex;
                color: $uni-color-primary;
                font-weight: $uni-font-weight;
               font-size:$uni-font-size-26;
                padding: 0 0 0 40rpx;
                align-items: center;
                justify-content: space-between;
                width: 30%;
                margin-right: 50rpx;
                image {
                    
                    width: 12rpx;
                    height: 12rpx;
                }
            }

            .all {
                height: 36rpx;
                color: $uni-text-color;
                font-weight: $uni-font-weight;
               font-size:$uni-font-size-26;
                image {
                    width: 12rpx;
                    height: 12rpx;
                }
            }
        }
    }

    // 搜索框
    .SearchBox {

        margin-bottom: 20rpx;

    }
}

// 滚动容器
.comprehensive {
    border-radius: 16rpx;
    width: calc(100% - 40rpx);
    background-color: rgba(0, 0, 0, 0);
    margin: 0 20rpx;
    height: 65vh;
}


.time {
    border-radius: 30rpx;
    margin-bottom: 20rpx;
    border-radius: 30rpx;
    margin-bottom: 20rpx;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 96rpx;
    border-bottom: 1rpx solid #edecec;
    background-color: #ffffff;
    box-shadow: 0 1rpx 2rpx 0 #ebeaea;
    display: flex;

    .image {
        width: 36rpx;
        height: 36rpx;
        padding: 30rpx 20rpx 30rpx 30rpx;

        image {
            width: 36rpx;
            height: 36rpx;
        }
    }

    .title {
        color: #666666;
        height: 42rpx;
        font-size: 30rpx;
        font-weight: 500;
    }
}

// 弹出框 列表
.popup_box {
    width: 100%;
    height: 50%;
    background-color: $uni-bg-color;
    border-top-right-radius: 30rpx;
    border-top-left-radius: 30rpx;
    text-align: center;
    font-weight: 700;
    color: #000;
    font-size: 30rpx;

    .title {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
    }

    .name {
        width: 100%;
        height: 50vh;

        .list {
            width: 100%;
            height: 80rpx;
            line-height: 80rpx;
            background-color: $uni-bg-color;
        }

        .list_loading {
            width: 100%;
            height: 80rpx;
            line-height: 80rpx;
            font-weight: 400;
            color: #666;
            background-color: $uni-bg-color;
        }
    }
}

// 弹出框 状态
.popup-content {
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: $uni-bg-color;
    border-top-right-radius: 30rpx;
    border-top-left-radius: 30rpx;

    .title {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        color: #000;
        font-weight: 700;
    }

    .state {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        font-weight: 700;
        color: #333;
        text-align: center;
    }
}

// 考勤列表
.Attendance_List {
    width: 100%;
    height: 100%;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);

    .List_item {
        width: calc(100% - 40rpx);
        height: 104rpx;
        background-color: $uni-bg-color;
        display: flex;
        padding: 23rpx 30rpx 23rpx 20rpx;

        .head {
            width: 104rpx;
            height: 104rpx;
            background-color: pink;
            // margin-left: 20rpx;
            border-radius: 50%;

            image {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }

        .center {
            width: 80%;
            height: 100%;

            .top {
                width: 100%;
                height: 50%;
                display: flex;

                .nickname {
                    // width: 60rpx;
                    height: 42rpx;
                    font-family: PingFangSC;
                    color: $uni-text-color;
                    font-weight: $uni-font-weight;
                    font-size: 15px;
                    font-style: normal;
                    text-decoration: none;
                    text-align: left;
                    margin-left: 30rpx;
                    margin-right: 20rpx;
                }

                .age {
                    font-family: PingFangSC;
                    color: #999999;
                    font-weight: 400;
                    font-size: 13px;
                    font-style: normal;
                    text-decoration: none;
                    text-align: left;
                    margin-right: 14rpx;
                }

                .phone {
                    width: 32rpx;
                    height: 32rpx;
                    background-color: #f9f9f9;

                    image {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .bottom {
                width: 100%;
                height: 50%;
                font-family: PingFangSC;
                color: $uni-color-primary;
                font-weight: $uni-font-weight;
                font-size: 12px;
                font-style: normal;
                text-decoration: none;
                display: flex;
                margin-left: 30rpx;
            }
        }

    }
}

.headline {
    width: 100%;
    height: 80rpx;
    background-color: #f6f6f6;
    // margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    line-height: 80rpx;
    border-top-left-radius: 16rpx;
    border-top-right-radius: 16rpx;

    .statistics {
        font-family: PingFangSC;
        color: #000000;
        font-weight: $uni-font-weight;
        font-size: 14px;
        font-style: normal;
        text-decoration: none;
        padding-left: 20rpx;
    }

    .refresh {
        font-family: PingFangSC;
        color: $uni-color-primary;
        font-weight: $uni-font-weight;
        font-size: 14px;
        font-style: normal;
        text-decoration: none;
        padding-right: 20rpx;

        // position: relative;
        image {
            width: 26rpx;
            height: 24rpx;
        }
    }
}
</style>